わかばちゃんと学ぶIonic Git管理入門

これからIonicを始めるデザイナーさん ＆ デザイナーさんにGitを使って欲しいエンジニアさんのために作りました！

@llminatoll

https://gyazo.com/df224e41ae41324f0066fa7905c7853d

自己紹介

Webデザイナー / マンガ家 / 技術書執筆

パラボラアンテナ愛好家📡

著書

https://gyazo.com/48b9cdcce5ffe8b63b36329d03912988

https://gyazo.com/e226fb977a034c69b400e444607b8625

https://gyazo.com/9c02dac72a2de78b4db4d083587658f8

46万PV

よき( ˘ω˘)( ˘ω˘)

本題

https://gyazo.com/edd8379c6fc56b041d8adc0681178746

答え

実はもうGit入ってる

書籍p32にて

生成されたフォルダ「ionic_tutorial」の中身を見てみると

https://gyazo.com/c5d9e49c3f17936c990c012b39055138

オッ

すでに.gitフォルダがデキトル

「.gitフォルダが見当たらないんですけど」という方は

https://gyazo.com/eaf2bdf974132ad60773eda5ce811dbe

設定方法

https://gyazo.com/d696928a1fcdf74d9b094342ffea437e

.gitってなんよ

https://ciq-prod-magazine-resources.s3-ap-northeast-1.amazonaws.com/magazine/wp-content/uploads/2016/06/git_03_add.jpg

リポジトリ

https://ciq-prod-magazine-resources.s3-ap-northeast-1.amazonaws.com/magazine/wp-content/uploads/2016/06/git_03_2.jpg

で

ionic_tutorialフォルダをSourceTreeで管理してみましょう

⬇動画です 再生できます

https://i.gyazo.com/50b4fb1e8ce42c8c105385974e913e73.mp4

簡＆単

ドラッグ＆ドロップするだけ

一瞬でリポジトリをSourceTreeに登録できました

ローカルからGitHubにアップロード

まずGitHub上で空のリポジトリを作る

https://gyazo.com/b026facb14d0122ad62b1e726d8138b0

そしたらこんな感じのURLがもらえます

HTTPSをコピーします

https://gyazo.com/fa4e5d1a579cc2c3d5f6d631b8e81d7d

SourceTreeに戻り、リモートリポジトリを追加します

https://gyazo.com/e931bf8e0f2cd5bf2b8f7e9ca7c63f0b

先ほどのURLを追加し、名前は「origin」としてリモートリポジトリとして登録します

動画で見るとこんな感じです

https://i.gyazo.com/34d4960423e956ad17150a5c466b6892.mp4

リモートリポジトリにプッシュします

https://i.gyazo.com/b59375cbcad48bc410619bc126a667f0.mp4

これでGitHubにアップロードできました✨

https://gyazo.com/6684b9d6fb9a099a830b5978b50c0ea4

デザイナーがGitHubを使えるとどういいの？

エンジニアとの協業ができる💪( ˘ω˘💪)

Webアプリの自動デプロイ💪( ˘ω˘💪)

プッシュしたら自動的にサーバーに反映される

かっこいいですね！

まとめ

すでにGitハイッテル

SourceTreeに

ドラッグ＆ドロップ

リモートリポジトリの登録は

クリックしていくだけ

いい時代になりました！

https://gyazo.com/936b08717df2eec6c22fca00601b94de

デザイナーもIonic + Gitしよう🎨 😋

Thank you!

湊川あい @llminatoll

3/22 新刊出ます！予約受付中

https://i.gyazo.com/8b39e939aa7f6c021e7a1a0bfb8fc1bf.jpg